<template>
	<div style="">

		<el-row :gutter="10">
			<el-form ref="elForm" :model="form" :rules="rules" label-width="80px">
				<el-col :span="24">
					<el-tree :default-expand-all="showCityArr.length>0" style="height:400px;overflow:auto;" v-if="mode==='multiple'"
						:data="areaTree" show-checkbox node-key="id" ref="tree" highlight-current :props="defaultProps">
					</el-tree>
					<el-form-item label="区域" v-else>
						<div class="xc-flex">
							<el-select v-model="form.province_id" placeholder="省" @change="initCity">
								<el-option :label="item.name" :value="item.id" v-for="(item,index) in areaList" :key='index'></el-option>
							</el-select>
							<el-select v-if="form.province_id!=''" v-model="form.city_id" placeholder="市" @change="initRegion">
								<el-option :label="item1.name" :value="item1.id" v-for="(item1,index1) in areaList[form.province_id]['city']"
									:key='index1'></el-option>
							</el-select>
							<el-select v-if="form.city_id!=''" v-model="form.area_id" placeholder="区">
								<el-option :label="item2.name" :value="item2.id"
									v-for="(item2,index2) in areaList[form.province_id]['city'][form.city_id]['region']" :key='index2'></el-option>
							</el-select>
						</div>
					</el-form-item>

				</el-col>

				<el-col :span="24">
					<el-form-item label="" prop="">
						<el-button type="primary" icon="el-icon-success" @click="submit()"> 确定 </el-button>
					</el-form-item>
				</el-col>
			</el-form>
		</el-row>


	</div>

</template>

<script>
	import select_region from '@/lib/utils/select.region.js';
	import region from '@/lib/utils/region.js';
	import {
		areaIdFnc
	} from '@/lib/utils/utils';

	export default {
		props: {
			mode: {
				type: String,
				default: 'multiple'
			},
			showCityArr: {
				type: Array,
				default: () => [],
			},
			showRegionArr: {
				type: Array,
				default: () => [],
			}
		},
		data() {
			return {
				meta: {
					title: ""
				},
				areaList: select_region,
				form: {
					province_id: '', // 省d  
					city_id: '', // 市id  
					area_id: '', // 区、县id 
				},
				defaultProps: {
					children: 'children',
					label: 'name'
				},
				rules: {
					province_id: [{
						required: true,
						message: '请选择',
						trigger: 'blur'
					}],
					city_id: [{
						required: true,
						message: '请选择',
						trigger: 'blur'
					}],
					area_id: [{
						required: true,
						message: '请选择',
						trigger: 'blur'
					}],
				},
				areaTree: [],


			}
		},
		provide() {
			return {
				vm: this
			}
		},
		inject: ['vm'],
		mounted() {
			console.log('mounted', region)
			// 只显示某的城市
			var newRegion = JSON.parse(JSON.stringify(region))
			if (this.showCityArr.length) {
				this.areaTree = newRegion.filter(i => {
					if (i.children) {
						var arr2 = i.children.filter(i2 => {
							if (this.showRegionArr.length) {
								var arr3 = i2.children.filter(i3 => this.showRegionArr.some(a => a == i3.id))
								if (arr3.length) i2.children = arr3
							}
							return this.showCityArr.some(a => a == i2.id)
						})
						if (arr2.length) {
							this.$set(i, 'children', arr2)
							return true
						}
					}
				})
			} else {
				this.areaTree = newRegion
			}
		},
		methods: {


			/*初始化城市id*/
			initCity() {
				this.form.city_id = ''
			},
			/*初始化区id*/
			initRegion() {
				this.form.area_id = ''
			},
			submit() {
				// 多选
				if (this.mode === 'multiple') {
					var arr = this.$refs.tree.getCheckedNodes().filter(i => i.level === 3)
					var idArr = arr.map(i => {
						var {
							name,
							id
						} = areaIdFnc(i.id)
						return {
							id: id,
							name: name,
							nameStr: name.join('/'),
							obj: {
								province_id: id[0],
								province_name: name[0],
								city_id: id[1],
								city_name: name[1],
								region_id: id[2],
								region_name: [2],
								area_id: id[2],
								area_name: name[2]
							}
						}
					})
					this.$emit('confirm', idArr)
				}
			},
		},
	}
</script>

<style>

</style>